<template>
    <div>
        <div class="title">项目招引</div>
        <div id="bar"></div>
    </div>
</template>
<script setup>
    import {watch} from 'vue';
    import echarts from 'echarts';

    const props = defineProps(['resData']);

    watch(() => props.resData,(res) => {
        var myChart = echarts.init(document.getElementById("bar"));
        var colorList = ['#ff302e', '#fe9a00', '#fed106', '#3f8fff'];
        var itemStyle
        var datas = []
        datas = res.data.项目招引数据
        const option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            grid: {
                left: -40,
                right: 0,
                containLabel: true
            },
            xAxis: {
                show: false,
                type: 'value'
            },
            yAxis: [{
                type: 'category',
                inverse: true,
                axisLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                axisPointer: {
                    label: {
                        show: true,
                        margin: 10
                    }
                },
                data: datas.map(item => item.name),
                axisLabel: {
                    margin: 80,
                    fontSize: 12,
                    align: 'left',
                    color: '#fff',
                    rich: {
                        a1: {
                            color: '#fff',
                            backgroundColor: colorList[0],
                            width: 15,
                            height: 10,
                            align: 'center',
                            borderRadius: 2,
                            fontSize: 10
                        },
                        a2: {
                            color: '#fff',
                            backgroundColor: colorList[1],
                            width: 15,
                            height: 10,
                            align: 'center',
                            borderRadius: 2,
                            fontSize: 10
                        },
                        a3: {
                            color: '#fff',
                            backgroundColor: colorList[2],
                            width: 15,
                            height: 10,
                            align: 'center',
                            borderRadius: 2,
                            fontSize: 10
                        },
                        b: {
                            color: '#fff',
                            backgroundColor: colorList[3],
                            width: 15,
                            height: 10,
                            align: 'center',
                            borderRadius: 2,
                            fontSize: 10
                        }
                    },
                    formatter: function (params) {
                        var index = datas.map(item => item.name).indexOf(params);
                        index = index + 1;
                        if (index - 1 < 3) {
                            return [
                                '{a' + index + '|' + index + '}' + '  ' + params
                            ].join('\n')
                        } else {
                            return [
                                '{b|' + index + '}' + '  ' + params
                            ].join('\n')
                        }
                    }
                }
            }, {
                type: 'category',
                inverse: true,
                axisTick: 'none',
                axisLine: 'none',
                show: true,
                data: datas.map(item => item.value),
                axisLabel: {
                    show: true,
                    fontSize: 14,
                    color: '#fff',
                    formatter: '{value}'
                }
            }],
            series: [
                {
                    name: '',
                    type: 'bar',
                    barWidth: 6,
                    showBackground: true,
                    data: datas.map((item) => {
                        itemStyle = {
                            color: '#26a8ff'
                        }
                        return {
                            value: item.value,
                            itemStyle: itemStyle
                        };
                    }),
                },
            ]
        };
        myChart.setOption(option);
        let sizeFun = function () {
            myChart.resize()
        }
        window.addEventListener("resize", sizeFun);
    })
</script>

<style lang="less" scoped>
.title {
    width: 1.0688rem;
    height: .4679rem;
    color: #fff;
    font-weight: bold;
    font-size: .2083rem;
    background: url('@/assets/images/16.png') no-repeat bottom right;
    position: absolute;
}

#bar {
    padding: 0;
    top: .0042rem;
    left: -.1042rem;
    height: 2.8667rem;
}

</style>
